<template>
    <div class="cooperation">
        <el-image :src="img01"></el-image>
        <div style="text-align:center">
            <div style="margin-left: 100px;float: left;width: 770px;text-align:left">
                <p class="title-comment">成功案例</p>
                <div v-html="success.content">
                </div>
                <!-- 暂时不使用 -->
                <!-- <ul class="ul-kundi">
                    <li
                        v-for="example in examples"
                        :key="example.id"
                        class="li-kundi"
                    >
                        {{example.content}}
                    </li>
                </ul> -->
            </div>
            <div style="float: left;margin-left: 70px;width: 300px;">
                <p class="title-comment">合作单位</p>
                <ul class="ul-kundi">
                    <li
                        v-for="(unit, index) in units"
                        :key="unit.id"
                        :class="{bc01:index%2==0, bc02:index%2==1}"
                    >
                        {{unit.name}}
                    </li>
                </ul>
                <el-image
                    :src="img02"
                    style="height: 200px; width: 100%"
                ></el-image>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            img01: require("@/assets/images/cooperation/Case-01.jpg"),
            img02: require("@/assets/images/cooperation/case-02.jpg"),
            examples: [],
            success: {},
            units: []
        };
    },
    methods: {
        // 该方法被舍弃使用
        getExamples() {
            this.$http("/successExample/getAll").then(response => {
                this.examples = response.data;
            });
        },
        getSuccesses() {
            this.$http("/success/getAll")
                .then(response => {
                    this.success = response.data[0];
                })
                .catch(err => err);
        },
        getUnits() {
            this.$http("/cooperationUnit/getAll").then(response => {
                this.units = response.data;
            });
        }
    },
    mounted() {
        this.getSuccesses();
        this.getUnits();
    }
};
</script>

<style>
.bc01 {
    list-style: none;
    margin-top: 10px;
    background-color: rgb(169, 255, 255);
}
.bc02 {
    list-style: none;
    margin-top: 10px;
    background-color: rgb(243, 243, 243);
}
</style>